import React, { memo, useRef, useState, useEffect } from "react";
import { createPortal } from "react-dom";
import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { formalMinuteSeconds } from "@/utils/formatMinuteSecond";
import { NavLink } from "react-router-dom";
import { SongTableStyle } from "./style";
import { getfg } from "@/utils/format-utils";
import Four from "@/components/button/fourCheck";
import {
  getSongDetailsMessage,
  addSongId,
} from "../../pages/player/store/actionType";
import { getPlayUrl } from "@/utils/format-utils";
import CoverMask from "@/components/coverMask";

export default memo(function SongTable(props) {
  const trBoxRef = useRef();
  const dispatch = useDispatch();
  const [btnNumber, setBtnNumber] = useState(null);
  const [open, setOpen] = useState(false);

  const getMusicLists = (ids) => {
    getPlayUrl(ids).then((res) => {
      // freeTrialInfo 若不为null则要收费
      if (res.data[0].freeTrialInfo) {
        setOpen(true);
        return;
      } else {
        setBtnNumber(ids);
        dispatch(getSongDetailsMessage(ids));
        dispatch(addSongId(ids));
      }
    });
  };

  const collectSongs = (id) => {};
  const zhuanfaSongs = (id) => {};
  const loadSongs = (id) => {};

  const { playLists } = useSelector(
    (state) => ({
      playLists: state.getIn(["player", "songLists"]),
    }),
    shallowEqual
  );

  useEffect(() => {
    if (playLists[0]) {
      setBtnNumber(playLists[0].id);
    }
  }, [playLists]);

  const close = () => {
    setOpen(false);
  };

  return (
    <SongTableStyle>
      {createPortal(
        <CoverMask close={close} open={open} />,
        document.getElementById("root")
      )}
      <div className="songTableTitle">
        <span className="song-list">歌曲列表</span>
        <span className="song-number">
          {props.playlistData.code !== 200
            ? ""
            : props.playlistData.playlist.trackCount}
          首歌
        </span>
        <div className="fr song-time-r">
          <span className="play-time">
            播放：
            <span className="play-time-number">
              {props.playlistData.code !== 200
                ? ""
                : props.playlistData.playlist.playCount}
            </span>
            次
          </span>
        </div>
      </div>
      <div className="playList-table">
        <table>
          <thead className="sprite_table">
            <tr>
              <th className="first-kb sprite_table"></th>
              <th className="bt sprite_table">
                <div className="wp sprite_table">标题</div>
              </th>
              <th className="sc sprite_table">
                <div className="wp sprite_table">时长</div>
              </th>
              <th className="gs sprite_table">
                <div className="wp sprite_table">歌手</div>
              </th>
              <th className="zj sprite_table">
                <div className="wp sprite_table">专辑</div>
              </th>
            </tr>
          </thead>
          <tbody>
            {props.playlistData.code !== 200 ? (
              <tr></tr>
            ) : (
              props.playlistData.playlist.tracks.map((item, index) => {
                const playing = item.id === btnNumber;
                return (
                  <tr ref={trBoxRef} className="tr-box" key={item.id}>
                    <td className="tr-num">
                      <div className="tr-num-div">
                        <span>{index + 1}</span>
                        <i
                          onClick={(e) => getMusicLists(item.id)}
                          className={
                            playing ? "playing" : "tr-name-play sprite_table"
                          }
                        ></i>
                      </div>
                    </td>
                    <td className="tr-name">
                      <div>
                        <NavLink
                          to={{
                            pathname: "/song",
                            search: "?id=" + item.id,
                          }}
                          className="tr-name-span fl"
                        >
                          {item.name}
                        </NavLink>
                        {item.mv !== 0 ? (
                          <NavLink
                            to={{
                              pathname: "/mv",
                              search: "?id=" + item.mv,
                            }}
                          >
                            <i className="sp-i sprite_table"></i>
                          </NavLink>
                        ) : (
                          ""
                        )}
                      </div>
                    </td>
                    <td className="tr-time">
                      <div className="tr-time-times">
                        {formalMinuteSeconds(item.dt)}
                      </div>
                      <Four
                        id={item.id}
                        collectSongs={(e) => collectSongs(item.id)}
                        zhuanfaSongs={(e) => zhuanfaSongs(item.id)}
                        loadSongs={(e) => loadSongs(item.id)}
                      />
                    </td>
                    <td className="tr-songer">
                      <div>
                        <span>
                          {item.ar.map((itema, indexa) => {
                            return (
                              <NavLink
                                to={{
                                  pathname: "/artist",
                                  search: "?id=" + itema.id,
                                }}
                                key={indexa}
                              >
                                {getfg(itema.name, item, indexa)}
                              </NavLink>
                            );
                          })}
                        </span>
                      </div>
                    </td>
                    <td className="tr-zj">
                      <div>
                        <NavLink
                          to={{
                            pathname: "/album",
                            search: "?id=" + item.al.id,
                          }}
                        >
                          {item.name}
                        </NavLink>
                      </div>
                    </td>
                  </tr>
                );
              })
            )}
          </tbody>
        </table>
      </div>
    </SongTableStyle>
  );
});
